<template>
  <div class="app-container" v-loading="pageLoading">
    <div class="filter-container">
      <el-input style="width: 260px;" placeholder="输入物料/产品编码按回车" clearable class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="queryString">
        <template slot="prepend">料号</template>
      </el-input>
      <el-input style="width: 260px;" :value="data.key_part_name || ''" class="filter-item" disabled>
      </el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
    </div>
    <el-tabs v-model="currentTab" @tab-click="tabClick">
      <!-- TAB1 -->
      <el-tab-pane label="基本信息" name="tab1">
        <tab1 :dataList='data' />
      </el-tab-pane>
      <!-- TAB2 -->
      <el-tab-pane label="供应商来料" name="tab2">
        <tab2 ref="tab2" />
      </el-tab-pane>
      <!-- TAB3 -->
      <el-tab-pane label="客户料号" name="tab3">
        <tab3 ref="tab3" />
      </el-tab-pane>
      <!-- TAB4 -->
      <el-tab-pane label="条码规则" name="tab4">
        <tab4 ref="tab4" />
      </el-tab-pane>
      <!-- TAB6 -->
      <el-tab-pane label="标签档案配置" name="tab6">
        <tab6 ref="tab6" />
      </el-tab-pane>
      <!-- TAB5 -->
      <el-tab-pane label="产品包装规格" name="tab5">
        <tab5 ref="tab5" />
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import tab1 from '@/views/masterdata/components/materialInfo/tab1'
import tab2 from '@/views/masterdata/components/materialInfo/tab2'
import tab3 from '@/views/masterdata/components/materialInfo/tab3'
import tab4 from '@/views/masterdata/components/materialInfo/tab4'
import tab5 from '@/views/masterdata/components/materialInfo/tab5'
import tab6 from '@/views/masterdata/components/materialInfo/tab6'
// import testVue from '../customize/fuelCell/test.vue'
export default {
  mixins: [commonMixin],
  name: 'materialInfo',
  components: {
    tab1,
    tab2,
    tab3,
    tab4,
    tab5,
    tab6,
  },
  data: function () {
    return {
      pageLoading: false,
      tabLoading: false,

      currentTab: 'tab1',
      initStatus: {},
      queryString: '',
      data: {},
    }
  },
  methods: {
    research() {
      this.data = {}
      this.currentTab = 'tab1'
      this.initStatus = {}
      this.pageLoading = true
      this.$request(this.$api.material + 'getbykpn', { kpn: this.queryString })
        .then((r) => {
          this.pageLoading = false
          if (r && r.length == 1) {
            this.data = r[0]
            this.setType()
          }
        })
        .catch((e) => {
          this.pageLoading = false
        })
    },
    tabInit(tab) {
      //页签数据已经初始化了

      if (this.initStatus[tab]) return
      this.initStatus[tab] = true
      switch (tab) {
        case 'tab1':
          break
        case 'tab2':
          this.$refs.tab2.tab2Init()
          break
        case 'tab3':
          this.$refs.tab3.tab3Init()
          break
        case 'tab4':
          this.$refs.tab4.tab4Init()
          break
        case 'tab5':
          this.$refs.tab5.tab5Init()
          break
        case 'tab6':
          this.$refs.tab6.tab6Init()
          break
      }
    },
    tabClick(v) {
      this.tabInit(v.name)
    },
    // 设置Tabel或Form配置里面的属性 依据Key设置
    setArrayProps(target, props) {
      props.forEach((i) => {
        let k = _.findIndex(target, (j) => j.key == i.key)
        if (k !== -1) {
          let tmp = Object.assign({}, target[k], i)
          target.splice(k, 1, tmp)
        }
      })
    },

    // 根据原材/成品半成品显示不同内容
    setType() {
      // let matshow = this.data.category == 1
      // this.setArrayProps(this.tab1Fields, [
      //   { key: 'key_part_type', hidden: !matshow },
      //   { key: 'brief_code', hidden: matshow },
      //   { key: 'model_code', hidden: matshow },
      //   { key: 'model_name', hidden: matshow },
      // ])
    },

    //tab2

    //tab3

    //tab4

    //tab5

    //tab6
  },
  created: function () {
    if (this.$route.params && this.$route.params.id) {
      this.queryString = this.$route.params.id
      this.research()
    }
  },
}
</script>

<style scoped>
</style>
